import React, { useState } from 'react';
import { Modal, Button, Toast } from 'antd-mobile';
import { applyRefund } from '@api/order';


const Refund = (props) => {

  const reasonList = [
    { key: 'axa1', text: '描述与商品不符' },
    { key: 'axa2', text: '质量问题' },
    { key: 'axa3', text: '质品变质' },
    { key: 'axa4', text: '供应商发错货' },
    { key: 'axa5', text: '拍错了' },
    { key: 'axa6', text: '其他' }
  ]

  const [active, setactive] = useState(0)
  const [reason, setreason] = useState('描述与商品不符')

  return (
    <>
      <Modal
        visible={props.modal}
        maskClosable={true}
        transparent
        popup={true}
        onClose={e => { props.close() }}
        animationType='slide-up'
        className="my-madal"
        title="退款原因"
      >
        <div className="content" style={{
          borderTop: " solid 1px rgba(0, 0, 0, .3)",
        }}>

          {
            reasonList.map((item, key) => {
              return (
                <div key={key + item.key} className="reason-item flex-row"
                  onClick={e => { selectedReason(key, item.text) }}
                  style={{
                    margin: '.4rem 0',
                    color: '#474747',
                    fontSize: '.4rem'
                  }}>
                  <div className="left">{item.text}</div>
                  <div className="right"
                    style={{
                      width: '.4rem',
                      height: ' .4rem',
                      borderRadius: '50%',
                      border: 'solid 1px rgba(0, 0, 0, .3)',
                    }}
                  >
                    {active === key && <div style={{
                      width: '100%',
                      height: '100%',
                      borderRadius: '50%',
                      background: '#ff752d'
                    }}></div>}
                  </div>
                </div>
              )
            })
          }

          <Button
            onClick={e => { refund(props.orderno) }}
            style={{
              background: '#ff752d',
              color: 'white',
              borderRadius: '.75rem',
              fontSize: '.5rem',
              fontWeight: 'bold'
            }}
          >
            确定
        </Button>

        </div>
      </Modal>
    </>
  )

  function selectedReason(key, reason) {
    setactive(key)
    setreason(reason)
  }

  async function refund() {
    let params = {
      orderno: props.orderno,
      reason,
    }
    let res = await applyRefund(params)
    if (res.status === 200) {
      Toast.success(res.msg)
      window.location.reload()
    }else{
      Toast.fail( res.msg )
    }

  }

}

export default Refund